<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Neumorphic Button and Input</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
		<link rel="stylesheet" href="./elements.css" />
	</head>
	<body>
		<div id="neumorphism" :class="toggle ? 'light' : 'dark'">
		 
		 <h1 :class="[toggle ? 'light' : 'dark']">NEUMORPHIC BUTTON & INPUT</h1>
		 
		 <button :class="[toggle ? 'light' : 'dark']" @click="toggle = !toggle">Toggle: {{ toggle ? 'dark' : 'light' }}</button>
		 <br />
		 <button :class="[toggle ? 'light' : 'dark', 'accent']">accent</button>
		 <button :class="[toggle ? 'light' : 'dark', 'info']">info</button>
		 <button :class="[toggle ? 'light' : 'dark', 'success']">success</button>
		 <button :class="[toggle ? 'light' : 'dark', 'warning']">warning</button>
		 <button :class="[toggle ? 'light' : 'dark', 'error']">error</button>
		 <br />
		 <input :class="[toggle ? 'light' : 'dark', 'accent']" type="text" placeholder="accent">
		 <input :class="[toggle ? 'light' : 'dark', 'info']" type="text" placeholder="info">
		 <input :class="[toggle ? 'light' : 'dark', 'success']" type="text" placeholder="success">
		 <input :class="[toggle ? 'light' : 'dark', 'warning']" type="text" placeholder="warning">
		 <input :class="[toggle ? 'light' : 'dark', 'error']" type="text" placeholder="error">
		</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
		<script src="./elements.js"></script>
	</body>
</html>